<template>
  <el-form :model="formData" size="small" :rules="rules" ref="formRef" label-width="108px">
    <div class="y-px-3 y-py-3 y-rounded y-mb-3 y-border-solid y-border-[1px] y-border-[#efefef]">
      <h3 class="y-mb-3 y-flex y-items-center">
        <i class="y-block y-w-1.5 y-h-4 y-bg-blue-400 y-mx-2"></i>
        <span class="y-text-base">基本信息</span>
      </h3>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="所属父级" prop="pid">
            <yyCascader :options="pidOptions" v-model="formData.pid" @change="onChangePid" propsLabel="name" propsValue="id" propsChildren="childList" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" :maxlength="32"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="菜单编码" prop="code">
            <el-input v-model="formData.code" :maxlength="32">
              <template slot="prepend" v-if="parentMenuData.code">{{ parentMenuData.code }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="权限码" prop="permission">
            <el-input v-model="formData.permission" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.permission">{{ parentMenuData.permission }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="路由指向" prop="routerViewName">
            <el-input v-model="formData.routerViewName" :maxlength="128"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="formData.sort" :maxlength="128"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="y-px-3 y-py-3 y-rounded y-mb-3 y-border-solid y-border-[1px] y-border-[#efefef]">
      <h3 class="y-mb-3 y-flex y-items-center">
        <i class="y-block y-w-1.5 y-h-4 y-bg-blue-400 y-mx-2"></i>
        <span class="y-text-base">其它</span>
      </h3>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="formData.component" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.component">{{ parentMenuData.component }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="访问路径" prop="path">
            <el-input v-model="formData.path" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.path">{{ parentMenuData.path }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="图标" prop="icon">
            <yySelectIcon v-model="formData.icon" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="显示" prop="isShow">
            <el-radio-group v-model="formData.isShow">
              <el-radio v-for="item in isShowOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="开启缓存" prop="keepAlive">
            <el-radio-group v-model="formData.keepAlive">
              <el-radio v-for="item in keepAliveOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="formData.state">
              <el-radio v-for="item in stateOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="y-px-3 y-py-3 y-rounded y-mb-3 y-border-solid y-border-[1px] y-border-[#efefef]">
      <h3 class="y-mb-3 y-flex y-items-center y-justify-between">
        <div class="y-flex y-items-center">
          <i class="y-block y-w-1.5 y-h-4 y-bg-blue-400 y-mx-2"></i>
          <span class="y-text-base">当前菜单按钮集合</span>
        </div>
        <div class="y-pl-8">
          <el-button size="small" type="primary" @click="hanldeAdd">添加</el-button>
          <el-button size="small" @click="handleInit">初始化</el-button>
        </div>
      </h3>
      <div>
        <draggable tag="div" @update="dragUpdate" v-model="formData.childMenus" :options="dragOptions">
          <div class="y-relative y-border-[1px] y-border-[#efefef] y-px-8 y-pt-6 y-mb-3" v-for="(item, index) in formData.childMenus" :key="index">
            <div class="y-absolute y-right-2 y-top-2 y-cursor-pointer hover:y-opacity-80 y-z-10" @click="handleDel(index)">
              <i class="el-icon-close"></i>
            </div>
            <el-row class="y-pr-8" :gutter="10">
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="名称" :prop="'childMenus.' + index + '.name'" :rules="ruleBlur">
                  <el-input v-model="item.name" :maxlength="32"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="菜单编码" :prop="'childMenus.' + index + '.code'" :rules="ruleBlur">
                  <el-input v-model="item.code" :maxlength="32">
                    <template slot="prepend" v-if="parentMenuData.code || formData.code">{{ mergeStr(formData.code, parentMenuData.code, "_") }}</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="权限码" :prop="'childMenus.' + index + '.permission'" :rules="ruleBlur">
                  <el-input v-model="item.permission" :maxlength="128">
                    <template slot="prepend" v-if="parentMenuData.permission || formData.permission">{{ mergeStr(formData.permission, parentMenuData.permission, ":") }}</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="路由指向">
                  <el-input v-model="item.routerViewName" :placeholder="`不填默认使用父级菜单编码：${mergeStr(formData.code, parentMenuData.code, '_')}`" :maxlength="128"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="组件路径" prop="component">
                  <el-input v-model="item.component" :maxlength="128">
                    <template slot="prepend" v-if="parentMenuData.component || formData.component">{{ mergeStr(formData.component, parentMenuData.component, "/") }}</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                <el-form-item label="访问路径" prop="path">
                  <el-input v-model="item.path" :maxlength="128">
                    <template slot="prepend" v-if="parentMenuData.path || formData.path">{{ mergeStr(formData.path, parentMenuData.path, "/") }}</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </draggable>
      </div>
    </div>
    <div class="y-text-center">
      <el-form-item>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import {
  isShowOptions,
  stateOptions,
  keepAliveOptions,
  ruleBlur,
  ruleChange,
  defaultChildMenu,
  initChildMenus
} from "@/constant/defaultOptions.js";
import { createLoading, createMessage, mergeStr } from "@/utils/index.js";
import { goBack } from "@/utils/browser.js";
import yyCascader from "@/components/yyForm/component/yyCascader.vue";
import yySelectIcon from "@/components/yyForm/component/yySelectIcon.vue";
import draggable from "vuedraggable";
import { cloneDeep } from 'lodash'
export default {
  name: "system_menu_add",
  components: { yyCascader, yySelectIcon, draggable },
  data() {
    return {
      isShowOptions,
      ruleBlur,
      ruleChange,
      stateOptions,
      keepAliveOptions,
      pidOptions: [],
      parentMenuData: {
        component: "",
        permission: "",
        path: "",
        code: "",
      },
      formData: {
        pid: "",
        name: "",
        code: "",
        component: "",
        state: "",
        path: "",
        permission: "",
        routerViewName: "layer",
        icon: "",
        sort: "",
        isShow: "",
        keepAlive: "",
        childMenus: [],
      },
      rules: {
        name: [ruleBlur],
        code: [ruleBlur],
        permission: [ruleBlur],
        routerViewName: [ruleBlur],
        sort: [ruleBlur],
        state: [ruleChange],
        isShow: [ruleChange],
        keepAlive: [ruleChange],
      },
      dragOptions: {
        animation: 200,
      },
    };
  },
  methods: {
    mergeStr,
    dragUpdate() {
      console.log("执行了更新拖拽回调");
    },
    onChangePid(val) {
      this.parentMenuData.permission = val?.permission;
      this.parentMenuData.code = val?.code;
      this.parentMenuData.path = val?.path;
      this.parentMenuData.component = val?.component;
    },
    handleDel (index) {
      this.formData.childMenus.splice(index, 1);
    },
    hanldeAdd () {
      this.formData.childMenus.push(defaultChildMenu);
    },
    handleInit () {
      this.formData.childMenus = cloneDeep(initChildMenus);
    },
    handleConfirm() {
      this.$refs.formRef.validate(async (isOk) => {
        if (!isOk) {
          return createMessage("请完成必填项的填写与选择");
        }
        const params = {
          ...this.formData,
        };
        const { permission, code, path, component } = this.parentMenuData;
        params.permission = mergeStr(params.permission, permission, ":");
        params.code = mergeStr(params.code, code, "_");
        params.path = mergeStr(params.path, path, "/");
        params.component = mergeStr(params.component, component, "/");
        if (params.childMenus && params.childMenus.length) {
          params.childMenus = params.childMenus.map((c, index) => {
            return {
              ...c,
              permission: mergeStr(c.permission, params.permission, ":"),
              code: mergeStr(c.code, params.code, "_"),
              path: mergeStr(c.path, params.path, "/"),
              component: mergeStr(c.component, params.component, "/"),
              routerViewName: c.routerViewName || params.code,
              sort: index + 1
            }
          })
        }
        const loading = createLoading("保存中，请稍等");
        try {
          await this.$globalApi.menu.sysMenuInsertApi(params);
          createMessage("保存成功", { type: "success" });
          this.$emit("refresh");
          goBack("/system/menu");
        } catch (err) {
          console.log("新增菜单报错了", err);
        } finally {
          loading.close();
        }
      });
    },
    handleReset() {
      this.$refs.formRef.resetFields();
    },
    async getPidOptions() {
      try {
        const res = await this.$globalApi.menu.sysMenuListApi({});
        this.pidOptions = res;
      } catch (err) {
        console.log("报错了", err);
      }
    },
    handleClose() {
      goBack("/system/menu");
    },
  },
  mounted() {
    this.getPidOptions();
  },
};
</script>

<style lang="scss" scoped>
</style>